<template>
		<view style='background-color: white;'>
			<view class="j-content-between flex pd">
				<text>筛选</text>
				<uni-icons type="closeempty" size="18" @click="maske"></uni-icons>
			</view>
			<view class="j-content-between flex positionr pd" @click="showReport">
				<text>单据类型</text>
				<view class="right flex a-item">{{ checkArr }}
					<view class="right" :style="{transform: 'rotate (' + retate + 'deg)',color:'#CCCCCC'}"> > </view>
				</view>
				<!-- 下拉 -->
				<!-- <view v-if="show" class="positiona">
				<view v-for="(item,index) in selectlist" :key="index" @click.stop='types(item)'>
					{{ item.value }}
				</view>
			</view> -->
			
			</view>
			<view class="reportBox" :style="{height:reportBoxHeight+'rpx'}">
				<!-- <view class="uni-list"> -->
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value" :lable='item.name'>
					<view style="padding:10rpx 0"><checkbox style="transform:scale(0.7)" :value="item.value" :checked="item.checked"/>{{item.name}}</view>
				</label>
			</checkbox-group>
			<!-- <uni-data-checkbox mode="tag" multiple v-model="selectchange" :localdata="items"></uni-data-checkbox>
			<uniDataCheckbox :localdata="items"></uniDataCheckbox> -->
		<!-- </view> -->
			</view>
			<view class="j-content-between flex pd bgc">
				<text>客户</text>
				<view>{{ customer.customername }}</view>
			</view>
			<view class="j-content-between flex pd bgc">
				<text>业务员</text>
				<view>{{ user.userName }}</view>
			</view>
			<view class="j-content-between flex pd" >
				<text>开始日期</text>
				<uni-datetime-picker type="date" :clear-icon="true" v-model="start_time" placeholder="请选择开始日期"/>
			</view>
			<view class="j-content-between flex pd">
				<text>结束日期</text>
				<uni-datetime-picker type="date" :clear-icon="true" v-model="end_time"  placeholder="请选择结束日期"/>
			</view>
			<button class="signIn" @click="sure">确定</button>

		</view>
		<!-- 弹出层 -->
		<!-- <uni-popup ref="popups" type="bottom">底部弹出 Popup</uni-popup> -->

</template>
<script setup>
	import 'uni.scss'
	import { uniDataCheckbox } from "@/components/uniDataCheckbox.vue";
	export default {
		components:{uniDataCheckbox},
		props:{
		customer:{
      type: Object,
      default: null
    },
	user:{
      type: Object,
      default: null
    }
  },
		data() {
			return {
				userId:'',
				username:'',
				customername:'',
				start_time: '', //开始时间
				end_time: '', //结束时间
				reportBoxHeight: 0,
				retate: 0,
				ordertype: '',
				show: false,
				page:1,
				values:'',
				items: [{
					value: 1,
						name: '销售订单'
					},
					{
						value: 2,
						name: '销售退单'
					},
					{
						value: 3,
						name: '收款单'
					},
				],
				checkArr: [],

			}
		},
		methods: {
			maske(){
				this.$emit('masks')
			},
			showReport() {
				this.reportBoxHeight = this.reportBoxHeight ? 0 : 210
				this.retate = this.reportBoxHeight ? 90 : 0
			},
			sure() {
				const date={
					page:this.page,
					size:20,
					customerId:this.$props.customer.customerId, 
					userId:this.$props.user.userId, 
					orderType:this.values,
					startDate:this.start_time,
					endDate:this.end_time
				}
				this.$emit('sure', date)
			},
			checkboxChange: function (e) {
				// var items = this.items
				// this.selectchange=e.detail.name
					this.values = e.detail.value.join(',');
				var arr = [];
				e.detail.value.forEach(current => {
      for (var value of this.items){
        if(current == value.value){
          arr.push(value.name);
          break;
        } 
      }
    });
	this.checkArr=arr.join(",");
			}
		},
	}
</script>

<style lang="scss">
	.positionr {
		position: relative;
	}
	.bgc{
		background-color:#f1f1f1 !important;
	}
	.pd {
		padding: 20rpx;
		border-top: 1rpx solid #f6f7f7;
	}

	.signIn {
		width: 90%; 
		background: #007aff;
		border-radius: 90rpx;
		margin: 10rpx 5%;
		color: #FDFEFF;
	}
	.reportBox{
  overflow: hidden;
  padding-left: 40rpx;
  transition: height 0.2s linear ;
}
</style>
